<template>
    <div class="page-order-list">
        <!-- <SearchInput v-model="searchKey" placeholder="商品名称/商品编号/订单号"/> -->
        <CommonNav :value="nav" :navs="navs" @change="onNavChange"></CommonNav>

        <div v-if="list.length > 0" class="order-wrap">
            <OrderCard v-for="(order, index) in list"
                :key="index"
                :good-type="order.type"
                :detail="order.detail"
                :link-id="order.link_id"
                :order-id="order.id"
                :pay-no="order.pay_no"
                :name="order.title"
                :cover="order.cover"
                :price="order.price"
                :original-price="order.original_price"
                :coupon-pay="order.coupon_pay"
                :total-price="order.price"
                :status="order.status"
                :delivery="order.delivery"
                :comment-visible="!order.is_comment"
                :count="order.number"
                :is-complete="order.buyer_confirm"
                :is-finish="order.is_finish"
                :order="order"
                @click="onClickOrder(order)">
            </OrderCard>
            <div class=""></div>
        </div>

        <div v-if="list.length === 0 && !req" class="text-center empty-wrap">
            <!-- <span class="icon">&#xe62c;</span> -->
            <img src="https://oss-frakiss.oss-cn-chengdu.aliyuncs.com/icon/mini_images/noPurchase.png" class="tishi_img" alt="">
            <div class="tishi_text" >您还未购买</div>
        </div>
    </div>
</template>

<script lang="ts">
import { api } from '@/lib/api';
import store from '@/store';
import OrderCard from '@/features/order/orderCard.vue';
import CommonNav from '@/components/nav/commonNav.vue';
import SearchInput from '@/components/search/searchInput.vue';
import { ROUTE_NAME } from '@/lib/constant';
import { Component, Vue } from 'vue-property-decorator';

@Component({
    name: 'OrderList',
    components: {
        CommonNav,
        OrderCard,
        SearchInput,
    },
})
export default class OrderList extends Vue {
    public req: any = true;
    public nav: any = 'all';

    // public navs: ValueText1[] = [
    //     { value: 'all', text1: '所有订单' },
    //     { value: 'init', text1: '待支付' },
    //     { value: 'paid', text1: '已支付' },
    //     { value: 'finish', text1: '已完成' },
    // ];
    // 新
    public navs: ValueText1[] = [
        { value: 'all', text1: '所有订单' },
        { value: 'init', text1: '待支付' },
        { value: 'paid', text1: '已支付' },
        // { value: 'finish', text1: '已完成' },
        { value: 'received', text1: '待收货' },
        { value: 'return', text1: '退换/售后' },
        { value: 'evaluate', text1: '待评价' }

    ];

    public searchKey: any = '';

    public get status() {
        return this.$route.query.status;
    }
    /** 订单列表 */
    public get listMap() {
        return store.state.order.list;
    }
    /** 订单列表 */
    public get wrap() {
        return this.listMap[this.nav as string] || {
            list: [],
            loaded: false,
            req: false,
        };
    }
    /** 订单列表 */
    public get list() {
        return this.wrap.list;
    }

    public onNavChange(nav: any) {
        this.nav = nav.value;
        this.getList(0, true);
    }

    /**
     * 请求订单列表
     */
    public async getList(offset: any, forceUpdate = false) {
        await store.dispatch('order/getList', {
            status: this.nav,
            offset,
            count: 10,
            forceUpdate,
        });
    }
    /**
     * 点击订单
     */
    public onClickOrder(order: Order.ListItem) {
        // api.navigateTo({
        //     url: '/pages/order_detail/main',
        //     query: {
        //         order_id: order.id,
        //     },
        // });

        api.push({
            name: ROUTE_NAME.ORDER_DETAIL,
            params: {
                orderId: order.id + '',
            },
        });
    }
    public onReachBottom() {
        this.getList(this.list.length);
    }
    public async onPullDownRefresh() {
        await this.getList(0, true);
        wx.stopPullDownRefresh();
    }

    public async created() {
        if (this.status) {
            this.nav = this.status;
        }

        this.req = true;
        await this.getList(0, true);
        this.req = false;

        window.addEventListener('reachbottom', this.onReachBottom);
        window.addEventListener('pulldownrefresh', this.onPullDownRefresh);
    }
    public beforeDestroy() {
        window.removeEventListener('reachbottom', this.onReachBottom);
        window.removeEventListener('pulldownrefresh', this.onPullDownRefresh);
    }
}
</script>

<style lang="less">
@import "../../lib/style/mixins.less";

.tishi_img{
    width: 60%;
}
.tishi_text{
    color: #FEDADC;
}
.page-order-list {
    position: relative;
    min-height: 100%;
    background-color: #fafafa;
    .common-nav {
        background-color: @white-color;
    }
    .order-card {
        margin: 10px 0;
        background-color: @white-color;
    }
    .empty-wrap {
        position: absolute;
        top: 50%;
        width: 100%;
        transform: translate(0, -50%);
        color: @color-font-red;
        .icon {
            font-size: 128rpx;
            line-height: 160rpx;
        }
    }
}

</style>
